<template>
	<div class='device-info-box' :style="'padding-top:'+(barHeight)+'px'">
		<navBar left-icon="undo-filled" @onLeftIcon="back">
			<template v-slot:center>
				<view class="nav_center">
					<view @click="onLeft" :class="navSelect === 'left' ? 'navActive' : ''">部件列表</view>
					<view @click="onRight" :class="navSelect === 'right' ? 'navActive' : ''">基本信息</view>
				</view>
			</template>
			<template v-slot:right>
				<view @click="addPart" class="top-right"><uni-icons type="plusempty" size="14" color="#fff"></uni-icons>添加</view>
			</template>
		</navBar>
		<view v-if="navSelect === 'left'" class="container_left">
			<PartList :deviceId="deviceId" :projectId="projectId"></PartList>
		</view>
		<view v-if="navSelect === 'right'" class="container_left">
			<DeviceBaseInfo :deviceId="deviceId"></DeviceBaseInfo>
		</view>
	</div>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import PartList from '../part/PartList.vue'
	import DeviceBaseInfo from './DeviceBaseInfo.vue'
	export default {
		components: {
			NavBar,
			PartList,
			DeviceBaseInfo
		},
		data() {
			return {
				navSelect: 'left',
				projectId: '',
				deviceId: '',
				barHeight: 0
			}
		},
		onLoad(option) {
			this.projectId = option.projectId
			this.deviceId = option.deviceId
		},
		created() {
			this.barHeight = uni.getSystemInfoSync().statusBarHeight + 45;
		},
		methods: {
			back() {
				uni.navigateTo({
					url: '/pages/project/component/ProjectInfo?id=' + this.projectId
				})
			},
			onLeft() {
				this.navSelect = "left"
			},
			onRight() {
				this.navSelect = "right"
			},
			addPart() {
				uni.navigateTo({
					url: '/pages/project/part/AddPart?projectId=' + this.projectId + '&deviceId=' + this.deviceId
				})
			}
		}
	}
</script>

<style>
	@import '@/static/css/commons.css';
</style>